<template>
  <div class="dialogComp">
    <div class="dialogBox">
      <div class="dialogItem">
        <el-button type="primary" @click="first">dialog_first</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" @click="showLoading">全局loading组件</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" @click="showToast">toast</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" @click="showConfirm">confirm</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" @click="showAlert">alert</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" v-copy="copyText">复制</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" v-debounce="debounceClick">防抖</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" v-debounce="stopRequset">请求拦截</el-button>
      </div>
      <div class="dialogItem">
        <el-button type="primary" @click="screenShot">截图</el-button>
      </div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
      <div class="dialogItem"></div>
    </div>
    <first-dialog v-if="firstV" :visiable="firstV" @func="firstR"></first-dialog>
  </div>
</template>

<script>
import axios from "axios";
import firstDialog from './dialog'
import ScreenShort from "js-web-screen-shot";
export default {
  components: { firstDialog },
  data() {
    return {
      firstV: false,
      copyText: 'a copy directives',
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
    };
  },
  watch: {},
  methods: {
    first() {
      this.firstV = true
    },
    firstR(val) {
      this.firstV = val
    },
    showLoading() {
      this.$showDialog({
        text: "正在加载，请稍候...",
      });
      // 模拟发请求，10秒钟后将其关闭
      setTimeout(() => {
        this.$hideDialog();
      }, 6000);
    },
    showToast() {
      this.$toast.show({
        text: '复制成功',
        time: '2000', //显示的时间
      })
    },
    showConfirm() {
      this.$msgBox.showMsgBox({
        title: '提示',
        content: '确定要删除吗',
      }).then(async (val) => {
        // ...        
        console.log('确认')
      }).catch(() => {
        // ...
        console.log('取消')
      });
    },
    showAlert() {
      this.$xalert.show({
        text: "加载完成",
        flag: true
      })
    },
    debounceClick() {
      console.log('只触发一次')
    },
    async stopRequset() {
      const res = await axios.get("/user/list");
      console.log(res.data.data);
    },
    screenShot() {
      console.log("截图")

      var timer = setTimeout(() => {
        const screenShotHandler = new ScreenShort({
          enableWebRtc: false,  //是否显示选项框
          level: 99,  //层级级别
          completeCallback: this.callback,
          closeCallback: this.closeFn,
        });
      }, 0)
    },
    callback() {
      console.log("会")
    },
    closeFn() {
      console.log("关闭")
    },
  }
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.dialogComp {
  box-sizing: border-box;
  padding: 10px;
  height: 100%;

  // position: relative;
  .dialogBox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    height: 100%;

    // background-color: red;
    .dialogItem {
      margin: 0 20px 20px 0;
      width: 18%;
      height: 100px;
      line-height: 100px;
      // background-color: blue;
      border: 1px solid lightgray;
      border-radius: 4px;
      text-align: center;
    }
  }
}
</style>